<template>
    <div>
        <p style="text-align: center;font-size: 40px;">xx幼儿园</p>
        <div class="kindbox" style="display: flex;justify-content: space-between;margin-top: 30px;">
            <div style="width: 23%; height: 130px; background-color: #1688f1;" class="boxs">
                <h1 style="color: #fff;font-size: 38px;margin-left: 10px;">24</h1>
                <p style="font-size: 15px;color: #fff;margin-left: 10px;">分校</p>
                <i class="fa fa-th-large fa-5x icos" aria-hidden="true" />
                <div class="conditions"
                    style="height: 30px;width: 100%;line-height: 30px; background-color: #147ad8;text-align: center;color: #fff;margin-top: 40px;cursor: pointer;">
                    更多<i class="fa fa-arrow-circle-right" aria-hidden="true" style="margin-left: 5px;" /></div>
            </div>
            <div style="width: 23%; height: 130px; background-color: #1688f1;" class="boxs">
                <h1 style="color: #fff;font-size: 38px;margin-left: 10px;">24</h1>
                <p style="font-size: 15px;color: #fff;margin-left: 10px;">分校</p>
                <i class="fa fa-th-large fa-5x icos" aria-hidden="true" />
                <div class="conditions"
                    style="height: 30px;width: 100%;line-height: 30px; background-color: #147ad8;text-align: center;color: #fff;margin-top: 40px;cursor: pointer;">
                    更多<i class="fa fa-arrow-circle-right" aria-hidden="true" style="margin-left: 5px;" /></div>
            </div>
            <div style="width: 23%; height: 130px; background-color: #18bc9c;" class="boxs">
                <h1 style="color: #fff;font-size: 38px;margin-left: 10px;">24</h1>
                <p style="font-size: 15px;color: #fff;margin-left: 10px;">分校</p>
                <i class="fa fa-black-tie fa-5x icos" aria-hidden="true" style="color: #14a085;" />
                <div class="conditions"
                    style="height: 30px;width: 100%;line-height: 30px; background-color: #16a98c;text-align: center;color: #fff;margin-top: 40px;cursor: pointer;">
                    更多<i class="fa fa-arrow-circle-right" aria-hidden="true" style="margin-left: 5px;" /></div>
            </div>
            <div style="width: 23%; height: 130px; background-color: #f75444;" class="boxs">
                <h1 style="color: #fff;font-size: 38px;margin-left: 10px;">24</h1>
                <p style="font-size: 15px;color: #fff;margin-left: 10px;">分校</p>
                <i class="fa fa-group fa-5x icos" aria-hidden="true" style="color: #d2473a;" />
                <div class="conditions"
                    style="height: 30px;width: 100%;line-height: 30px; background-color: #de4b3d;text-align: center;color: #fff;margin-top: 40px;cursor: pointer;">
                    更多<i class="fa fa-arrow-circle-right" aria-hidden="true" style="margin-left: 5px;" /></div>
            </div>

        </div>


        <div class="block1">
            <el-timeline v-for="(item, index) in itemss" :key="index">
                <el-timeline-item :timestamp="item.time" placement="top">
                    <el-card style="height: 60px;">
                        <h4 style="float:left;" v-text="item.title"></h4>
                        <p style="float:right;" v-text="item.content"></p>
                    </el-card>
                </el-timeline-item>

            </el-timeline>
        </div>
        <div class="block2">
            <el-timeline v-for="(item, index) in items" :key="index">
                <el-timeline-item :timestamp="item.time" placement="top">
                    <el-card style="height: 60px;">
                        <h4 style="float:left;" v-text="item.title"></h4>
                        <p style="float:right;" v-text="item.content"></p>
                    </el-card>
                </el-timeline-item>

            </el-timeline>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ClassPROJECTIndex',

    data() {
        return {
            items: [
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },

                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },

                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },

                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
            ],
            itemss: [
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },

                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },

                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },

                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
                {
                    time: '2023/12/2',
                    title: '更新 Github 模板',
                    content: '王小虎 提交于 2018/4/3 20:46',
                },
            ]
        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>
.icos {
    float: right;
    margin-top: -60px;
    font-size: 6em;
    color: #1374cd;
    margin-right: 10px;
}

.block1 {
    float: left;
    margin-top: 80px;
    width: 45%;
}

.block2 {
    float: right;
    margin-top: 80px;
    width: 45%;
}
</style>